<template>
  <div class="h-full" v-loading="loading">
    <div v-if="moment" class="p-xl">
      <!-- 第一行：返回按钮、标题、操作菜单 -->
      <div class="flex-between mb-xl">
        <el-button @click="goBack" link :icon="Back" class="icon-md" />
        <h2 class="title text-center" style="flex: 1; margin: 0;">{{ moment.title || '详情' }}</h2>
        <el-dropdown>
          <el-icon class="icon-md cursor-pointer"><More /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>编辑</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- 第二行：时间、星期、收藏 -->
      <div class="flex-between mb-xl">
        <div class="flex gap-md">
          <span class="text-xs text-primary">{{ moment.createdTime }}</span>
          <span class="text-xs text-secondary">{{ getWeekday(moment.createdTime) }}</span>
        </div>
        <el-icon class="icon-xl cursor-pointer favorite-icon" :class="{ active: moment.isFavorite }">
          <Star :filled="moment.isFavorite" />
        </el-icon>
      </div>

      <!-- 第三行：内容 -->
      <MarkdownRenderer :content="moment.content" />
    </div>

    <el-empty v-else-if="!loading" description="未找到该内容" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Star, Back, More } from '@element-plus/icons-vue'
import { getMomentDetail } from '../api'
import type { Moment } from '../types'
import { getWeekday } from '@/utils/date'
import MarkdownRenderer from '@/components/MarkdownRenderer.vue'

const router = useRouter()
const route = useRoute()

const moment = ref<Moment | null>(null)
const loading = ref(false)

const goBack = () => {
  router.push('/moments')
}

const fetchMomentDetail = async () => {
  loading.value = true
  try {
    const data = await getMomentDetail(route.params.id as string)
    moment.value = data
  } catch (error) {
    console.error('获取详情失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchMomentDetail()
})
</script>

<style scoped>
.favorite-icon.active {
  color: #f56c6c;
}
</style>
